<template>
  <el-container>
    <el-header>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: $store.state.authority===4?'/admin/library':'/library' }">论文库</el-breadcrumb-item>
        <el-breadcrumb-item ><el-link @click="handlePaperLink()">论文详情</el-link></el-breadcrumb-item>
        <el-breadcrumb-item >站内查看</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-main>
      <div>
        <iframe :src="url" id="paperContent" scrolling="no" frameborder="0"
                class="content"></iframe>
        <el-button class="note-button"
                   type="primary"
                   @click="drawer=true" v-if="$store.state.authority===2">编辑笔记
        </el-button>
        <el-drawer title="笔记本"
                   :visible.sync="drawer"
                   size="70%">
          <note-editor style="height: 70%" :paper-id="paperId"></note-editor>
        </el-drawer>

      </div>
    </el-main>
  </el-container>
</template>


<script>



import NoteEditor from "./NoteEditor";

export default {
  name: "Content",
  inject:['reload'],
  components:{NoteEditor},
  data() {
    return {
      url: '',
      drawer: false,
      paperId:0
    }
  },

  methods:{
    //查看论文详情
    handlePaperLink() {
      let name
      if(this.$store.state.authority===4)
        name='AdminDetails'
      else
        name='Details'
      this.$router.push({
        name: name,
        params: {
          paperId:this.paperId,
        }
      }).then(()=>{
        this.reload()
      })
    }
  },


  mounted() {
    /*
      初始化链接
     */
    this.url = this.$route.params.url
    this.paperId=this.$route.params.paperId

    /**
     * iframe-宽高自适应显示
     */
    function changeMobsfIframe() {
      const mobsf = document.getElementById('paperContent');
      const deviceWidth = document.documentElement.clientWidth;
      const deviceHeight = document.documentElement.clientHeight;
      mobsf.style.width = (Number(deviceWidth) - 400) + 'px'; //数字是页面布局宽度差值
      mobsf.style.height = (Number(deviceHeight) - 200) + 'px'; //数字是页面布局高度差
    }

    changeMobsfIframe()

    window.onresize = function () {
      changeMobsfIframe()
    }
  }
}
</script>

<style scoped>
div {
  caret-color: transparent;
}

.content {
  position: absolute;
  top:25%;
  left: 15%;
  right: 0px;
  bottom: 100px;
  height: auto;
  width: auto;
  transform-origin: 90% 83%;
}

.note-button {
  position: absolute;
  right: 1%;
  top: 10%;
}

.note-button2 {
  position: absolute;
  right: 1%;
  top: 17%;
}
</style>
